import React, { useState, useEffect } from 'react';
import { Modal, Space, Radio } from 'antd';
import type { RadioChangeEvent } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { setLanguageVisible, setLanguage } from '@/store/reducers/setting';
import { useTranslation } from 'react-i18next';
import { updateMessageEnum } from '../../utils/MessageEnum';
import AgentService from '@/modules/Agent';

import './styles/setting.less';

interface LanguageListModalProps {
	visible?: boolean;
	onOK?: () => void;
	cancel?: () => void;
}

const LanguageListModal = (props: LanguageListModalProps) => {
	const { t, i18n } = useTranslation();
	const dispatch = useDispatch();
	const { visible } = props;
	const { setting } = useSelector((state: any) => state);
	const [value, setValue] = useState(AgentService.getLanguage());

	useEffect(() => {
		if (visible) {
			setValue(setting.language);
		}
	}, [visible]);

	const onChange = (e: RadioChangeEvent) => {
		setValue(e.target.value);
		AgentService.setLanguage(e.target.value);
	};

	const handleOk = () => {
		i18n.changeLanguage(value).then(() => {
			updateMessageEnum();
			dispatch(setLanguage(value));
			props.onOK && props.onOK();
		});
	};

	const handleCancel = () => {
		props.cancel && props.cancel();
	};
	return (
		<Modal title={t('language')} open={visible} onOk={handleOk} onCancel={handleCancel} maskClosable={false} okText={t('sure')} cancelText={t('cancel')}>
			<Radio.Group onChange={onChange} value={value} className="Language-List-Modal">
				<Space direction="vertical">
					<Radio value={'zh'}>{t('zh')}</Radio>
					<Radio value={'zh-TW'}>{t('zh-TW')}</Radio>
					{/* <Radio value={'en-US'}>{t('en-US')}</Radio> */}
				</Space>
			</Radio.Group>
		</Modal>
	);
};

export default LanguageListModal;
